<template>
    <el-container style="text-align: right; font-size: 12px">
        <!--********** 头部 -->
        <el-header style="height:auto">
            <e-header></e-header>
        </el-header>
        <!--********** 主体 -->
        <el-main style="height:auto">
            <div class="mo_login">

                <div class="login_cont"
                     v-loading="loading"
                     element-loading-text="正在登录中...请稍等"
                     element-loading-spinner="el-icon-loading"
                     element-loading-background="#fff">
                    <div class="login_addtitle">
                        <p>登录</p>
                    </div>
                    <!-- *********** -->
                    <el-form :model="ruleForm"
                             status-icon
                             :rules="rules"
                             ref="ruleForm"
                             label-width="30px"
                             class="demo-ruleForm">
                        <el-form-item label=""
                                      prop="username">
                            <el-input v-model="ruleForm.username"
                                      placeholder="请输入6-20位字母和数字组合"
                                      prefix-icon="el-icon-user">
                            </el-input>
                        </el-form-item>
                        <el-form-item label=""
                                      prop="password">
                            <el-input type="password"
                                      v-model="ruleForm.password"
                                      placeholder="请输入密码"
                                      autocomplete="off"
                                      prefix-icon="el-icon-lock"
                                      @keyup.enter.native="submitForm('ruleForm')">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-checkbox v-model="checked">记住账号</el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary"
                                       @click="submitForm('ruleForm')">立即登录</el-button>
                        </el-form-item>
                        <el-form-item>
                            <span class="location-left"
                                  @click="ToResetword()">忘记密码</span>
                            <span class="location-right"
                                  @click="ToRegister()">立即注册</span>

                        </el-form-item>
                    </el-form>

                </div>

            </div>
        </el-main>
        <!--********** 底部 -->
        <el-footer style="height:auto">
            <e-footer></e-footer>
        </el-footer>
    </el-container>

</template>
<script>
import eHeader from "@/components/public/Header.vue";
import eFooter from "@/components/public/Footer.vue";
import { throttle } from "../../ElementUI/public.js";
export default {
    components: {
        "e-header": eHeader,
        eFooter
    },
    data() {
        var validateUsername = (rule, value, callback) => {
            let reg3 = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/;
            if (value === "") {
                callback(new Error("请输入账号！"));
            } else if (!reg3.test(value)) {
                return callback(new Error("账号格式错误"));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            let reg3 = /^\s*$/g;
            if (value === "") {
                callback(new Error("请输入密码！"));
            }
            // else if (!reg3.test(value)) {
            //     return callback(new Error("密码格式错误"));
            // } 
            else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPassword");
                }
                callback();
            }
        };
        return {
            labelPosition: "top",
            ruleForm: {
                username: "",
                password: ""
            },
            rules: {
                username: [{ validator: validateUsername, trigger: "blur" }],
                password: [{ validator: validatePass, trigger: "blur" }]
            },
            checked: false,
            loading: false,
        };
    },
    mounted() {
        this.getCookie();
    },
    methods: {
        // 登录提交
        submitForm: throttle(function (formName) {
            var that = this;
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    that.loading = true;
                    let Params = {
                        username: that.ruleForm.username,
                        password: that.ruleForm.password
                    };
                    that.$https.fetchPost("/login", Params).then(res => {
                        let resdata = res.data;
                        switch (resdata.code) {
                            case 1000:
                                let adddata = resdata.data
                                //传入账号名，密码，和保存天数3个参数
                                that.setCookie(that.ruleForm.username, that.ruleForm.password, 7);
                                sessionStorage.clear();
                                localStorage.removeItem('accessName');
                                localStorage.removeItem('accessId');
                                localStorage.setItem('accessName', resdata.data.name, resdata.data.m_id)
                                localStorage.setItem('accessId', resdata.data.m_id)
                                localStorage.setItem('loginTime', new Date().getTime())
                                that.loading = false
                                that.showError("success", "登录成功");
                                that.$router.push("/")
                                break;
                            case 1002:
                                that.loading = false

                                that.showError("error", resdata.msg + "，请重新输入");
                                sessionStorage.clear();
                                //清空Cookie
                                that.clearCookie();
                                break;
                            case 1003:
                                that.loading = false
                                that.showError("error", resdata.msg + "，请重新输入");
                                sessionStorage.clear();
                                //清空Cookie
                                that.clearCookie();
                                break
                        }
                    });
                } else {
                    return false;
                }
            });
        }, 1000),
        //设置cookie
        setCookie(c_name, c_pwd, exdays) {
            var exdate = new Date(); //获取时间
            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
            //字符串拼接cookie
            window.document.cookie =
                "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
            window.document.cookie =
                "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
        },
        //读取cookie
        getCookie: function () {
            if (document.cookie.length > 0) {
                var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
                for (var i = 0; i < arr.length; i++) {
                    var arr2 = arr[i].split("="); //再次切割
                    //判断查找相对应的值
                    if (arr2[0] == "userName") {
                        this.ruleForm.username = arr2[1]; //保存到保存数据的地方
                        this.checked = true;
                    } else if (arr2[0] == "userPwd") {
                        this.ruleForm.password = arr2[1];
                    }
                }
            }
        },
        //清除cookie
        clearCookie: function () {
            this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
        },
        //账号正则匹配，字母+数字
        //消息提示
        showError(type, status) {
            this.$message({
                type: type,
                showClose: true,
                center: true,
                message: status
            });
        },
        //跳转重置密码页
        ToResetword() {
            this.$router.push("/Resetword");
        },
        //跳转注册页
        ToRegister() {
            this.$router.push("/Register");
        },
    },
   
};
</script>
<style lang="scss" scoped>
.el-container {
    overflow: hidden;
}
.el-main {
    overflow: hidden;
    padding: 0;
    border-radius: 0px;
}

$font-color: #fff;
$bg-color: rgba(46, 139, 87, 0.4);
$btn-color: #409eff;
$shadow-color: 3px 7px 50px -12px rgba(64, 158, 255, 0.4);
@mixin bubbleAnimation($send1, $send2) {
    animation: bubble $send1 linear infinite,
        direction $send2 ease-in-out infinite alternate;
}
.mo_login {
    position: relative;
    width: 100%;
    padding-top: 150px;
    height: 685px;
    overflow: hidden;
    background-image: url(../../assets/images/userimg.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        // background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
        z-index: -1;
    }
    .login_cont {
        margin: 0 auto;
        padding: 30px 25px 28px 25px;
        width: 380px;
        height: 360px;
        border-radius: 0px;
        background: #ffffff;
        box-shadow: $shadow-color;
        .el-form {
            .el-form-item__label {
                color: $btn-color;
            }
            .login_sub {
                text-align: center;
            }
            .el-button {
                width: 100%;
                font-size: 14px;
            }
        }
        .login_addtitle {
            width: 100%;
            height: 30px;
            font-size: 20px;
            color: #1445ab;
            margin-bottom: 25px;
            text-align: center;
        }
        .login_addtitle p {
            letter-spacing: 10px;
        }
    }
}

.login_cont /deep/ .el-loading-spinner {
    font-size: 30px;
}

.el-checkbox {
    float: left;
}
// .el-link {
//   width: 50%;
//   float: left;
// }
.location-left {
    width: 50%;
    float: left;
    text-align: left;
    font-size: 12px;
    color: #909399;
    cursor: pointer;
}

.location-left :hover {
    color: #558ffb;
    text-decoration: underline;
}
.location-right {
    width: 50%;
    float: left;
    text-align: right;
    font-size: 12px;
    color: #909399;
    cursor: pointer;
}
.location-right :hover {
    color: #558ffb;
    text-decoration: underline;
}
.el-form-item {
    margin-right: 25px;
    margin-left: -5px;
}

.el-form /deep/ .el-input__icon {
    color: #85ce61;
}
</style>
